<template>
	<view class="content">
		<view class="content_top">
			<image class="background-image" src="../../static/img/bg.png"></image>
			<view class="content_top_box">
				<view class="content_top_box_search">
					<view class="content_top_box_searchs">
						<tn-input :placeholderStyle="{ 
    fontFamily: 'PingFang SC', 
    fontWeight: '500', 
    fontSize: '24rpx', 
    color: '#999999', 
    textIndent: '100rpx' ,
	textIndent:'30rpx'
  }" placeholder="请输入流程名称" :customStyle="{ paddingLeft: '35rpx' }" v-model="value" @confirm="searchs()" />
					</view>
					<view class="content_top_box_search_btn"  @click="searchs()">
						<image src="../../static/img/search.png"  style="width: 164rpx;height: 84rpx;"></image>
					</view>
				</view>

			</view>
		</view>
		<view class="content_bottom">
			<view class="content_bottom_box" v-if="list.length>0">
				<view class="content_bottom_box_list" v-for="(item,index) in list":key="index">
				
					<view class="content_bottom_box_list_right">
						<view class="content_bottom_box_list_right_name">
							流程名称：{{item.name}}
						</view>
						<view class="content_bottom_box_list_right_dept">
							流程类型：{{item.type}}
						</view>
						<view class="content_bottom_box_list_right_type">
							<view class="content_bottom_box_list_right_type_left">
								提交时间：{{item.time}}
							</view>
							<view class="content_bottom_box_list_right_type_right">
								流程状态：<span>{{ getStateDescription(item.state) }}</span>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="content_bottom_box" v-else>
				 <tn-empty mode="list"></tn-empty>
			</view>
	
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				list:[],
				
			}
		},
		onLoad() {

		},
		mounted() {
				this.getpeople();
		},
			
		methods: {
			getStateDescription(state) {
			        switch (state) {
			            case "1":
			                return "待提交总包审核";
			            case "2":
			                return "已提交";
			            case "3":
			                return "待总包审核";
			            case "4":
			                return "已通过";
			            case "5":
			                return "已驳回";
			            default:
			                return "未知状态";
			        }
			    },
			searchs(){
			
				this.getpeople();
			},
			async  getpeople(){
				try {
					const url = '/portal/r/w'; // 替换为你的 API 地址
					const params = {
						// 构造你的请求参数
						cmd: 'com.awspaas.user.apps.sfeg.srm.supplier.personal.tasks',
						sid:uni.getStorageSync('SID'),
						phoneNumber: uni.getStorageSync('phoneNumber'),
						openId: uni.getStorageSync('OPEN_ID'),
						value:this.value,
						
					
					};
				
					// 发送 GET 请求
					const response = await this.$get(url, params);
					if(response.result=='ok'){
							this.list = response.data;
					}else{
						this.list=[]
					}
				
					// 处理请求成功的逻辑
					console.log('请求成功111', this.list);
				} catch (error) {
					// 处理请求失败的逻辑
					console.error('请求失败', error);
				}
			},
		
	
		toteamPerson(){
			uni.navigateTo({
				url: '../../pages/teamperson/teamperson'
			});
		}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
		/* 占据整个视口高度 */
		display: flex;
		flex-direction: column;
		position: relative;
		/* 相对定位，以便子元素可以相对于它定位 */
	}

	.content_top {

		position: relative;
		/* 设置相对定位，以便子元素可以相对于它定位 */
		width: 100%;
		/* 宽度百分之百 */
		height: 500rpx;
		/* 设置高度 */
		overflow: hidden;

		/* 触发 BFC */
		.background-image {
			position: absolute;
			/* 设置绝对定位，让背景图充满整个父容器 */
			top: 0;
			left: 0;
			width: 100%;
			/* 宽度百分之百 */
			height: 100%;
			/* 高度百分之百 */
			object-fit: cover;
			/* 图片填充父容器 */
			z-index: -1;
			/* 将背景图放到底层 */
		}

		.content_top_box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 64rpx 35rpx 0 35rpx;
			position: relative;

			.content_top_box_search {
				width: 87%;
				position: relative;
				height: 68rpx;
				background: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 51%, #FFFFFF 100%);
				border-radius: 36rpx;

				.content_top_box_search {
					text-indent: 50rpx;
					width: 100%;
					position: relative;
					height: 67rpx;

				}

				.tn-input__input {
					text-indent: 47rpx !important;
				}

			}

			.content_top_box_search_btn {
				position: absolute;
				top: -7rpx;
				right: -96rpx;
				/* height: 72rpx; */
				z-index: 9999;
			}
		}
	}

	.content_bottom {
		flex: 1;
		/* 自动填充剩余空间 */
		position: absolute;
		/* 绝对定位，覆盖在 .content_top 上方 */
		top: 200rpx;
		/* 位于父容器顶部下方 200rpx 处 */
		width: 100%;
		/* 宽度百分之百 */
		height: calc(100% - 200rpx);
		/* 高度占满父容器下方 */
		background-color: #F8F9FD;
		/* 背景色，可根据需要修改 */
		z-index: 0;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		/* 确保在 content_top 之下 */
		// display: flex;
		// justify-content: center;
		// align-items: center;

	.content_bottom_box{
		    margin: 34rpx;
			padding-bottom: 120rpx;
			.content_bottom_box_list{
				    margin-top: 12rpx;
				    padding: 28rpx;
				    background: #FFFFFF;
				    box-shadow: 0rpx 7rpx 10rpx 0rpx rgba(0,0,0,0.04);
					    display: flex;
					    align-items: center;
				    border-radius: 16rpx;
				    position: relative;
				
				
					.content_bottom_box_list_right{
						      width: 100%;
							.content_bottom_box_list_right_name{
								     font-family: PingFang SC;
								     font-weight: 500;
								     font-size: 28rpx;
								     color: #3A3A3A;
							}
							
							.content_bottom_box_list_right_dept{
							    font-family: PingFang SC;
							    font-weight: 400;
							    font-size: 24rpx;
							    color: #666666;
							    margin-top: 30rpx;
								
								
									
							}
							.content_bottom_box_list_right_type{
								    display: flex;
								    margin-top: 30rpx;
								    justify-content: space-between;
									.content_bottom_box_list_right_type_left{
										    font-family: PingFang SC;
										    font-weight: 400;
										    font-size: 24rpx;
										    color: #666666;
									}
									.content_bottom_box_list_right_type_right{
										    font-family: PingFang SC;
										    font-weight: 400;
										    font-size: 24rpx;
										    color: #666666;
									}
							}
					}
				
			}
	}





	}
	.contentpopur{
		.contentpopur_qcord{
			    text-align: center;
			    margin: 80rpx;
		}
		.contentpopur_xmName{
			    text-align: center;
			    font-family: PingFang SC;
			    font-weight: 500;
			    font-size: 28rpx;
			    color: #3A3A3A;
		}
		.contentpopur_dept{
			    text-align: center;
			    font-family: PingFang SC;
			    font-weight: 400;
			    font-size: 24rpx;
			    color: #666666;
			    margin-top: 34rpx;
		}
	}
</style>